<template>
  <div>
    <h1>公告管理</h1>
    <div class="ring_bg">
      <div class="notice_list_class" style="width: calc(40% - 5px); float: left; border-right:1px solid #EBEEF3;">
       <div style="background: #fff;height:30px; padding-bottom: 20px;border-bottom: 1px solid #EBEEF3;">
         <span>公告列表</span>
       </div>
        <div style="height: 450px; overflow: auto;">
          <ul style="display: inline-block;width:95% ">
            <li v-for="i in rows" style="border-bottom:1px solid #EBEEF3;height:100px;padding:20px 0" @click="showNotice(i)">
              <div style="font-size: 12px;"><i class="el-icon-message-solid" style="color: #5B73FF;margin-right:10px;"></i>
                <span style="color: #5a618b;">系统消息</span><span style="float:right;color: #5a618b;">{{ i.distanceTime }}</span>
                <el-button size="mini" plain disabled round v-if="!i.isRead" type="danger" style="margin-left: 10px">未读</el-button>
              </div>
              <div style="font-size: 18px;font-weight: bold;margin: 10px 0 10px 22px;">{{ i.title }}</div>
              <div style="font-size: 14px;margin-left:22px;color: #5a618b;">{{ i.content }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div style="width: 60%;float: left;">
        <div style="padding: 0 0 0 20px ;">
          <div style="color:#b2b6cd;font-size: 12px;"><span >{{ notice.createTime }}</span><span
                  style="margin-left: 30px;float: right">{{ notice.createUserName }}</span></div>
          <div v-html="notice.title" style="font-size: 22px;margin-bottom: 10px;margin-top: 10px;font-weight: bold"></div>
          <div v-html="notice.htmlContent" style="font-size: 14px;color: #4d5176;background: #fafafa;padding: 10px;height: 420px;overflow: auto;"></div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import request from "@/utils/Request";
import EventBus from '../../../utils/EventBus'

export default {
  name: "NoticeManager",
  data() {
    return {
      count: 10,
      rows: [],
      total: 0,
      clientHeight: window.innerHeight - 70 + 'px',
      notice: {},
      dialog: false,
      showNoticeDialog: false,
      loading: false,
      queryParam: {pageSize: 10, pageNo: 1}
    }
  },
  mounted() {
    document.addEventListener('scroll', this.scrollLoad, true);
    this.init();
  },
  methods: {
    showNotice(notice) {
      EventBus.$emit('readNotice');
      this.notice = notice;
      this.notice.htmlContent = this.notice.content;
      this.notice.htmlContent = this.notice.htmlContent.replace(/\n/g, '<br/>');
      this.notice.htmlContent = this.notice.htmlContent.replace(/ /g, ' &nbsp');
      if (!notice.isRead) {
        request.post("/notice/read", {noticeId:notice.id}).then(({data})=>{
          if (data.success) {
            notice.isRead = true;
          }
        }).catch(err => {
          this.$message({type: 'error', message: "标记已读失败"});
          console.log(err)
        })
      }
    },
    init() {
      request.get("/notice/list", {params: this.queryParam}).then(({data}) => {
        if (data.success) {
          this.rows.push(...data.data.rows);
          this.total = data.data.total;
          //计算时间差
          this.rows.forEach(i => {
            const createTime = new Date(i.createTime);
            const now = new Date()
            let day = (now - createTime) / (24 * 60 * 60 * 1000);
            let dayc = parseInt(day / 30);
            if (day >= 365) {
              i.distanceTime = '1年前'
            } else if (dayc >= 1 && dayc <= 12) {
              i.distanceTime = `${dayc}个月前`
            } else if (day < 30 && day >= 1) {
              i.distanceTime = `${parseInt(day)}天前`;
            } else if (day >= 0.0416) {
              i.distanceTime = `${parseInt(day * 24)}小时前`;
            } else if (day >= 0.00347 && day < 0.0416) {
              i.distanceTime = `${parseInt(day * 24 * 60)}分钟前`;
            } else {
              i.distanceTime = '刚刚';
            }
          })
        } else {
          throw new Error()
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询公告失败"});
        console.log(err)
      })
    },
    handleClose(done) {
      this.dialog = false;
    },
    scrollLoad() {
      if (this.$route.path==='/NoticeView') {
        let scrollbar = document.querySelector('.notice_list_class');
        let scrollHeight = scrollbar.scrollHeight || document.body.scrollHeight; //document的滚动高度
        let clientHeight = scrollbar.clientHeight || document.body.clientHeight;  //可视区高度
        let scrollTop = scrollbar.scrollTop || document.body.scrollTop || window.pageYOffset; //已滚动高度
        if (!this.onFetching) {
          if (clientHeight >= scrollHeight - scrollTop - 20) {
            console.log('加载更多......')
            this.onFetching = true
            this.queryParam.pageNo += 1;
            this.init();
          }
        }
      }
    }
  }
}
</script>

<style scoped>
  .ring_bg{
    padding: 20px;background: #fff;border-radius: 3px;border: 1px solid #EBEEF3;margin-top: 20px;height: 500px;
  }
</style>